<template>
  <div class="list">
    <ul v-if="list.length > 0">
      <template  v-for="qa in list" >
        <!-- 已回答 -->
        <li class="list-2" v-if="qa.question.status === '20'" :key="qa.question.questionId">
          <router-link :to="'/qa/' + qa.question.questionId">
            <a href="javascript:void(0)" class="title ftz16">{{qa.question.questionContent}}</a>
            <div class="photo-img">
                <a href="javascript:void(0)" class="photo-s">
                  <img :src="qa.questionedUser.avatar">
                </a>
                <span class="price" v-if="qa.question.payment > 0"><span class="icon-coin"></span>{{parseFloat(qa.question.payment)}}</span>
                <span class="price" v-else>免费</span>
            </div>
            <div class="info">
                <a href="javascript:void(0)" class="name">{{ qa.creator | getUserName }}</a>
                <a href="javascript:void(0)" class="txt">{{qa.answerShort}}</a>
                <div class="tips">
                  <i>{{qa.question.createTime | parseTime('{m}-{d} {h}:{i}')}}</i>
                  <i>分类：：{{qa.question.fieldName}}</i>
                  <i v-if="categoryTypeIndex < 3">{{ qa.creator | getUserName }}向我提问</i>
                </div>
            </div>
          </router-link>
        </li>
        <!-- 待回答 -->
        <li class="list-1" v-else :key="qa.question.questionId">
          <router-link :to="'/qa/' + qa.question.questionId">
            <a href="javascript:void(0)"><img :src="qa.creator.avatar" class="photo"></a>
            <div class="info">
                <a href="javascript:void(0)" class="title ftz16">{{qa.question.questionContent}}</a>
                <div class="tips">
                    <span class="price" v-if="qa.question.payment > 0"><span class="icon-coin"></span>{{parseFloat(qa.question.payment)}}</span>
                    <span class="price" v-else>免费</span>
                    <i> {{qa.question.createTime | parseTime('{m}-{d} {h}:{i}')}}</i>
                    <i>分类：{{qa.question.fieldName}}</i>
                    <i v-if="categoryTypeIndex < 3">{{ qa.creator | getUserName }}向我提问</i>
                </div>
            </div>
            <template v-if="categoryTypeIndex < 3">
              <button v-if="qa.question.status==='10'" class="ans" @click.stop.prevent="showAnswerQuestionBox(qa.question.questionId)">
                <span class="icon"></span>回答问题
              </button>
            </template>
          </router-link>
        </li>
      </template>
    </ul>
    <NoDataTips v-else/>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  props: ['list', 'categoryTypeIndex'],
  data () {
    return {

    }
  },
  filters: {
    getUserName (userInfo) {
      if (userInfo.authType === '1' || userInfo.authType === '2') {
        return userInfo.authName
      } else {
        return userInfo.userAccount
      }
    }
  },
  methods: {
    showAnswerQuestionBox (item) {
      this.$emit('showAnswerQuestionBoxFn', item)
    }
  }
}
</script>

<style scoped lang="scss">
$icon:'../../assets/res/img/icon_re.png';
.list li{
    padding:26px 15px;
    border-bottom: 1px solid #e6e6e6;
    position: relative;
}
.list .photo{
    display: inline-block;
    vertical-align: middle;
    width: 60px;
    height: 60px;
    border-radius: 50%;
}
.list .list-1 .info{
    display: inline-block;
    vertical-align: middle;
    width: 680px;
    height: 64px;
    position: relative;
    margin-left: 14px;
}
.list .title{
    display: block;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: bold;
    margin-bottom: 16px;
}
.list .info .tips{
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    color: #808080;
}
.list .price{
    font-size: 12px;
    color: #e94f4f;
    display: inline-block;
    vertical-align: middle;
    height: 28px;
    line-height: 28px;
    background-color: #fff2e2;
    border-radius: 14px;
    padding: 0 10px;
}
.list .list-1 .price{
    margin-right: 20px;
}
.list .list-1 .ans{
    width: 108px;
    height: 34px;
    border-radius: 17px;
    color: #fff;
    background-color: #e94f4f;
    position: absolute;
    right: 16px;
    top: 42px;
}
.list .list-1 .ans .icon{
    width: 24px;
    height: 24px;
    display: inline-block;
    vertical-align: middle;
    background-image: url($icon);
    background-repeat: no-repeat;
    background-position: -243px -15px;
    margin-right: 4px;
}
.list .info i{
    margin-right: 20px;
}
.list .list-2 .photo-img{
    height: 104px;
    width: 64px;
    display: inline-block;
    vertical-align: top;
    position: relative;
}
.list .list-2 .photo-s{
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    display: block;
}
.list .list-2 .photo-s img{
    width: 100%;
    height: 100%;
}
.list .list-2 .photo-img .icon-mid{
    position: absolute;
    right: 8px;
    top: 50px;
}
.list .list-2 .price{
    display: block;
    text-align: center;
    line-height: 28px;
    margin:10px auto 0 auto;
}
.list .list-2 .icon-mid{
    position: absolute;
    right: 8px;
    top: 50px;
}
.list .list-2 .info{
    display: inline-block;
    vertical-align: top;
    width: 720px;
    height: 96px;
    margin-left: 14px;
    position: relative;
}
.list .list-2 .name{
    color: #00a0e9;
    font-weight: bold;
}
.list .list-2 .txt{
    color: #484848;
    margin-top: 4px;
    height: 44px;
    line-height: 22px;
    position: relative;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}
</style>
